<template>
  <el-dialog
    title="人员选择"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="90vw"
    top="5vh"
    append-to-body
  >
    <el-container>
      <el-main style="height: 70vh; overflow-x: hidden">
        <el-row :gutter="20">
          <el-col :xs="24" :sm="24" :md="5">
            <div class="boxsty">
              <el-tree
                :data="treeData"
                :props="{
                  children: 'children',
                  label: 'name',
                }"
                :filter-node-method="filterNode"
                class="filter-tree"
                node-key="id"
                highlight-current
                :default-expanded-keys="[1]"
                accordion
                @node-click="getNodeData"
              />
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :md="7">
            <div class="boxsty">
              <div class="flex titbottom">
                <el-input
                  v-model="personQuery.name"
                  placeholder="请输入搜索用户"
                  style="margin-right: 10px"
                ></el-input>
                <el-button
                  @click="getPersons"
                  type="primary"
                  icon="el-icon-search"
                  plain
                  >搜索</el-button
                >
              </div>
              <div class="avue-crud">
                <el-table
                  @row-click="handleClick"
                  :data="tableDataDept"
                  v-loading="tableloading"
                  style="width: 100%"
                >
                  <el-table-column prop="username" label="用户" />
                  <el-table-column prop="ryName" label="姓名" />
                </el-table>
              </div>
              <div style="margin-top: 20px">
                <el-pagination
                  @size-change="sizeChangeHandle"
                  @current-change="currentChangeHandle"
                  :current-page="personQuery.currentPage"
                  :page-sizes="[10, 20, 50, 100]"
                  :page-size="personQuery.pageSize"
                  :total="personQuery.total"
                  background
                  layout="total, sizes, prev, pager, next"
                >
                </el-pagination>
              </div>
            </div>
          </el-col>
          <!--  -->
          <el-col :xs="24" :sm="24" :md="12">
            <div class="boxsty">
              <div class="tabletext titbottom">已选择人员</div>
              <div class="avue-crud">
                <el-table :data="tableDataUser" ref="ry-table" stripe>
                  <el-table-column prop="ryName" label="姓名" />
                  <el-table-column prop="deptName" label="部门" />
                  <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button
                        @click="delUserList(scope.$index)"
                        type="danger"
                        plain
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <!-- <div class="boxsty">
              <div class="tabletext titbottom">已选择人员</div>
              <div class="avue-crud">
                <el-table :data="tableDataUser" ref="ry-table" stripe>
                  <el-table-column
                    prop="jigouName"
                    label="机构名称"
                    width="300"
                  ></el-table-column>
                  <el-table-column label="操作" width="100">
                    <template slot-scope="scope">
                      <el-button
                        @click="delUserList(scope.$index)"
                        type="danger"
                        plain
                        >删除</el-button
                      >
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div> -->
          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="btnSave">确定</el-button>
      <el-button type="primary" plain @click="$emit('cancel')">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { fetchList } from "@/api/admin/user";
import { shouyuetree } from "@/api/hetongrenwu/hetongyeji/hetongnd";
export default {
  props: {
    visible: false,
    type: String,
  },
  data() {
    return {
      treeData: [],
      tableloading: false, //table遮挡
      tableDataDept: [],
      tableDataUser: [],
      personQuery: {
        deptId: null,
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条,
        isAsc: false, // 是否倒序
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      shouyuetree().then((response) => {
        this.treeData = response.data.data;
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getNodeData(data) {
      this.personQuery.deptId = data.id;
      this.getPersons(this.personQuery);
    },
    sizeChangeHandle(val) {
      this.personQuery.pageSize = val;
      this.personQuery.currentPage = 1;
      this.getPersons();
    },
    // 当前页
    currentChangeHandle(val) {
      this.personQuery.currentPage = val;
      this.getPersons();
    },
    getPersons() {
      this.tableloading = true;
      fetchList(this.personQuery)
        .then((response) => {
          this.tableDataDept = response.data.data.records;
          this.page.total = response.data.data.total;
        })
        .finally(() => (this.tableloading = false));
    },
    //选人添加到右边的框
    handleClick(vm) {
     //console.log(vm);
      this.tableDataUser.push(vm);
    },
    //删除人员list
    delUserList(index) {
      this.tableDataUser.splice(index, 1);
    },
    //保存人员
    btnSave() {
      this.$emit("submit", this.tableDataUser);
    },
  },
};
</script>

<style scoped>
</style>
